<template>
  <div>
    <h2>news二级路由</h2>
    <button @click ="toDetail('娱乐')">娱乐新闻</button>
    <button @click ="toDetail('体育')">体育新闻</button>
    <button @click ="toDetail('军事')">军事新闻</button>
    <button @click ="toDetail('政治')">政治新闻</button>
    <button @click ="toDetail('游戏')">游戏新闻</button>
    


    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
  export default  defineComponent({
    name:'News'
  })
</script>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
/* 
  useRouter
    返回 router 实例。相当于在模板中使用 $router。必须在 setup() 中调用
*/
const router = useRouter()

const toDetail= (type:string) => {
  router.push({
    name:"Detail",
    params:{
      type,
    }
  })
}


</script>

<style lang="scss" scoped>
  
</style>